<template lang="html">
  <div class="banner">
    <swiper :options="swiperOption">
    <swiper-slide v-for="(slide, index) in swiperSlides" :key="index">
      <router-link tag='img' :to="{ name:'IndexParticulars' ,params:{ bannerId:slide.id } }" :src="slide.img" alt=""></router-link>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
  </div>
</template>

<script>
export default {
  name:'Banners',
  data(){
    return{
      swiperOption:{
        loop : true,
        autoplay: {
          autoplay:true,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination',
        }
      }
    }
  },
  props:{
    swiperSlides:{
      type:Array,
      default:function(){
        return []
      }
    }
  }
}
</script>

<style lang="less">

.banner{
  width: 100%;
  height: 3.35rem;
  img{
    width: 100%;
    height: 100%;
  }
  .swiper-pagination-bullet {
      width: 0.11rem;
      height: 0.11rem;
      background: #000;
      opacity: 0.2;
  }
  .swiper-pagination-bullet-active {
      opacity: 1;
      background: #43bf92;
  }
}


</style>
